import React,{Component} from "react";
import {Form, Input,DatePicker,Modal,message} from 'antd';
import moment from 'moment'; // 时间插件 
import $ from 'jquery';
import reqwest from 'reqwest';
require("./UpdateModel.css");


const dateFormat = 'YYYY-MM-DD'; // 定义你需要的时间格式
const FormItem = Form.Item;
class UpdateModel extends Component{
    constructor(props) {
        super(props);
        this.state = {
          loading: false,
          modal: false,
          data:{},
          hints: {},
          validRules: [],
        };
      }


    init = (record) => {
        console.log(record)
        this.setState({
            data:record
        })
    }

    showModal = () => {
      this.setState({
        visible: true,
      });
    }
  
    hideModal = () => {
      this.setState({
        visible: false,
      });
    }

    handChange = (e) => {
        this.setState({
            data:{
                id:this.state.data.id,
                userName:this.state.data.userName,
                passwd:e.target.value,
                email:this.state.data.email,
                phonenumber:this.state.data.phonenumber,
                wechat:this.state.data.wechat,
                roleid:this.state.data.roleid,
                createtime:this.state.data.createtime
            }
        })
    }

    handleSelectChange = (e) => {
        this.setState({
            data:{
                id:this.state.data.id,
                userName:this.state.data.userName,
                passwd:this.state.data.passwd,
                email:this.state.data.email,
                phonenumber:this.state.data.phonenumber,
                wechat:this.state.data.wechat,
                roleid:e.target.value,
                createtime:this.state.data.createtime
            }
        })
    }

    handChange01 = (e) => {
        this.setState({
            data:{
                id:this.state.data.id,
                userName:e.target.value,
                passwd:this.state.data.passwd,
                email:this.state.data.email,
                phonenumber:this.state.data.phonenumber,
                wechat:this.state.data.wechat,
                roleid:this.state.data.roleid,
                createtime:this.state.data.createtime
            }
        })
    }

    handChange1 = (e) => {
        this.setState({
            data:{
                id:this.state.data.id,
                userName:this.state.data.userName,
                passwd:this.state.data.passwd,
                email:e.target.value,
                phonenumber:this.state.data.phonenumber,
                wechat:this.state.data.wechat,
                roleid:this.state.data.roleid,
                createtime:this.state.data.createtime
            }
        })
    }

    handChange2 = (e) => {
        this.setState({
            data:{
                id:this.state.data.id,
                userName:this.state.data.userName,
                passwd:this.state.data.passwd,
                email:this.state.data.email,
                phonenumber:e.target.value,
                wechat:this.state.data.wechat,
                roleid:this.state.data.roleid,
                createtime:this.state.data.createtime
            }
        })
    }



    //修改的操作
    handleOk=(e) => {
        this.setState({
            visible: false,
        });
        // $.ajax({
        //     type: "POST",
        //     url: "http://localhost:8008/user/update",
        //     dataType: "json",
        //     contentType:"application/json",
        //     data:JSON.stringify(this.state.data),
        //     success: function () {
        //     // alert("修改成功!!!");
        //     }
        // });this.props.fetch();
        // window.location.reload();
        //用fetch请求的全部数据
        fetch('http://localhost:8008/user/update', {
            method: 'POST',
            headers: {
              'Content-Type': 'application/json'
            },
            body: JSON.stringify(this.state.data)
          }).then(res=> {
                message.success('修改成功')
                this.props.fetch();
          }).catch(e=>{
                this.setState({
                    visible:false
                })
                message.error('修改失败')
            });
    }


    
    
    render(){

        return(
            <div>
               <Modal
                    title="修改用户"
                    visible={this.state.visible}
                    onOk={this.handleOk}
                    onCancel={this.hideModal}
                    okText="确认"
                    cancelText="取消"
                >
                <Form layout="vertical">

                    <FormItem label="用户名" className="formitem">
                        <Input className="inputk" autoComplete="off" value={this.state.data.userName} onChange={this.handChange01}/>
                    </FormItem>

                    <FormItem label="密码" className="formitem">
                        <Input.Password className="inputk" placeholder="请输入密码" value={this.state.data.passwd} onChange={this.handChange}/>
                    </FormItem>

                    <FormItem label="邮箱" className="formitem">
                        <Input className="inputk" type="textarea" value={this.state.data.email} onChange={this.handChange1}/>
                    </FormItem>

                    <FormItem label="手机号" className="formitem">
                        <Input className="inputk" type="textarea" value={this.state.data.phonenumber} onChange={this.handChange2}/>
                    </FormItem>

                    <FormItem label="微信号" className="formitem">
                        <Input className="inputk" type="textarea" value={this.state.data.wechat} disabled/>
                    </FormItem>

                    <FormItem label="角色" className="formitem">
                        <select
                            placeholder="--请选择--"
                            onChange={this.handleSelectChange}
                            style={{width:400,margin:5,height: 32,borderRadius:3,borderColor:(217,217,217)}}
                            value={this.state.data.roleid}
                        >
                            <option value="管理员">管理员</option>
                            <option value="用户">用户</option>
                        </select>
                    </FormItem>

                    <FormItem label="创建日期" className="formitem">
                        <DatePicker value={moment(this.state.data.createtime, dateFormat)} disabled/>
                    </FormItem>

                </Form>
                </Modal>
            </div>
        )
    }

}

const UpdateForm = Form.create({withRef: true})(UpdateModel);

export default UpdateForm;